<template>
  <KView class="countdown-view" :class="`countdown-view__${type}`">
    <KView v-for="(str,index) in timeData.hour" :key="`time_${index}`">{{str}}</KView>
    <KView class="countdown-view-interval">:</KView>
    <KView v-for="(str,index) in timeData.minute" :key="`time_${index}`">{{str}}</KView>
    <KView class="countdown-view-interval">:</KView>
    <KView v-for="(str,index) in timeData.second" :key="`time_${index}`">{{str}}</KView>
  </KView>
</template>

<script>
  export default {
    props: {
      time: {
        type: Number,
        required: true
      },
      type: {
        type: String,
        default: 'dark'
      }
    },

    computed: {
      timeData() {
        let time = this.time;
        let timeDur = this.$moment.duration(time, 'seconds');
        let second = timeDur.seconds();
        second = second >= 10 ? String(second) : '0' + second;

        let minute = timeDur.minutes();
        minute = minute >= 10 ? String(minute) : '0' + minute;

        let hour = timeDur.asHours();
        hour = Math.floor(hour);
        hour = hour >= 10 ? String(hour) : '0' + hour;
        return {
          hour: hour.split(''),
          minute: minute.split(''),
          second: second.split('')
        };
      }
    },

    data() {
      return {};
    }
  };

</script>

<style lang="scss">
  .countdown-view {
    height: formatPx(42);
    font-size: formatPx(30);

    >div {
      float: left;
      line-height: formatPx(42);
      height: 100%;
      width: formatPx(40);
      margin-right: formatPx(8);
      border-radius: 5px;
      text-align: center;
      font-weight: bold;

      &:last-child {
        margin-right: 0;
      }

      &.countdown-view-interval {
        width: auto;
        border-radius: 0;
        font-weight: normal;
      }
    }

    &.countdown-view__light {
      >div {
        background: #ffffff;
        color: #fd5a3a;

        &.countdown-view-interval {
          background: none;
          color: #ffffff;
        }
      }
    }

    &.countdown-view__dark {
      >div {
        background: #fd5a3a;
        color: #ffffff;

        &.countdown-view-interval {
          background: none;
          color: #000000;
        }
      }
    }
  }

</style>
